import {FlowStyle} from "../index";
import markSvg from "../public/mark.svg";

// 初始化graph
export const initGraph = (graph: any) => {
    graph.setEnabled(false);
    // 以HTML方式渲染文字，配合whiteSpace=wrap完成文字自动换行功能
    graph.setHtmlLabels(true);
    // 不显示组合cell中的缩放按钮
    graph.foldingEnabled = false;
    // 允许鼠标左键拖动
    graph.panningHandler.useLeftButtonForPanning = true;
    graph.panningHandler.ignoreCell = true;
    graph.container.style.cursor = 'move';
    graph.setPanning(true);
    // 不开启提示(鼠标放到有文字的地方类似title属性显示)
    graph.setTooltips(false);
}

// 加载样式信息
export const loadStyle = (graph: any, style: FlowStyle) => {
    graph.getStylesheet().putDefaultVertexStyle(style.defaultVertexStyle);
    graph.getStylesheet().putDefaultEdgeStyle(style.defaultEdgeStyle);
    graph.getStylesheet().putCellStyle('startNode', style.circleStartStyle);
    graph.getStylesheet().putCellStyle('startContainer', style.startNodeContainerStyle);
    graph.getStylesheet().putCellStyle('startContent', style.startNodeContentStyle);
    graph.getStylesheet().putCellStyle('activityNode', style.defaultNodeStyle);
    graph.getStylesheet().putCellStyle('activityContainer', style.activityNodeContainerStyle);
    graph.getStylesheet().putCellStyle('activityContent', style.activityNodeContentStyle);
    graph.getStylesheet().putCellStyle('endContainer', style.endNodeContainerStyle);
    graph.getStylesheet().putCellStyle('endContent', style.endNodeContentStyle);
    graph.getStylesheet().putCellStyle('endNode', style.circleEndStyle);
    graph.getStylesheet().putCellStyle('text', style.remarkTextStyle);
    graph.getStylesheet().putCellStyle('horizontalSwimlane', style.horizontalSwimLaneStyle);
    graph.getStylesheet().putCellStyle('verticalSwimlane', style.verticalSwimLaneStyle);
}

// 是否流程节点判断
export const isNode = (cell: any) => {
    return (
        cell.getStyle() &&
        (cell.getStyle().includes('Node') ||
            cell.getStyle().includes('Container') ||
            cell.getStyle().includes('Content'))
    );
}

// 是否流程节点中的content cell
export const isNodeContent = (cell: any) => {
    return cell.getStyle() && cell.getStyle().includes('Content');
}

// 根据传入的cell获取cell的ID
export const getCellId = (cell: any) => {
    let id = '';
    if (cell !== null && cell.isVertex() && isNode(cell)) {
        let tmpCell = cell;
        if (isNodeContent(cell)) {
            // 如果点击的是节点的子cell，则给tmpCell赋值父cell
            tmpCell = cell.getParent();
        }

        if (tmpCell) {
            id = tmpCell.getId();
        }
    }
    return id;
}

// 当前节点标识
export const setCurrentCellMark = (graph: any, mxCellOverlay: any, mxImage: any, mxPoint: any, cell: any) => {
    const overlay = new mxCellOverlay(
        new mxImage(markSvg, 16, 16),
        '当前节点',
    );
    overlay.offset = new mxPoint(-8, 8);
    overlay.align = 'right';
    overlay.verticalAlign = 'top';
    graph.addCellOverlay(cell, overlay);
    graph.setCellStyles('current', false);
}

// 给连接线增加水流效果
export const setEdgeFlow = (graph: any, cell: any, color: string) => {
    const state = graph.view.getState(cell);
    state.shape.node
        .getElementsByTagName('path')[0]
        .removeAttribute('visibility');
    state.shape.node
        .getElementsByTagName('path')[0]
        .setAttribute('stroke-width', '2');
    state.shape.node
        .getElementsByTagName('path')[0]
        .setAttribute('stroke', color);
    state.shape.node
        .getElementsByTagName('path')[1]
        .setAttribute('class', 'edge-flow-style');
}
